<template>
	<div class="three" v-show='show' @click="showFn()">
		<div class="threezxh">
			<p>综合</p>
			<p>最新发布商品</p>
			<p>价格从低到高</p>
			<p>价格从高到低</p>
			<p>评分从低到高</p>
		</div>
		<div class="threess">
			
		</div>
	</div>
</template>
<style type="text/css" scoped>
	.three{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.three .threezxh{
		position: fixed;
		background: #fff;
		z-index: 100;
		left: 0;
		right: 0;
		top:13%;
		bottom: 65%;
		color: #666;
		font-size: .36344rem
	}
	.three .threezxh>p{
		margin-top: .34542rem;
		margin-left: .3rem;
	}
	.three .threezxh>p:nth-of-type(1){
		margin-top: 0;
	}
	.threess{
		position: fixed;
		background: #000;
		z-index: 100;
		left: 0;
		right: 0;
		opacity: .3;
		top:35%;
		bottom: 0%;
	}
</style>
<script type="text/javascript">
		export default {
		data(){
			return {
				treen:false
			}
		},
		methods: {
			showFn(){
				this.$store.commit('changex');
			}
		},
		computed: {
			// 计算属性
			show(){
				// 当前组件访问仓库(vuex)当中的状态
				return this.$store.state.tree;
			}
		}
	}
</script>